<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cursor 项目与文件管理指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .card-hover {
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            border-color: rgba(102, 126, 234, 0.3);
        }
        
        .section-title {
            position: relative;
            padding-left: 20px;
        }
        
        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 30px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 2px;
        }
        
        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            border-radius: 8px;
            padding: 20px;
            overflow-x: auto;
            font-family: 'Consolas', 'Monaco', monospace;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-size: 24px;
            margin-bottom: 20px;
        }
        
        .mermaid {
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        }
        
        .tip-box {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            padding: 20px;
            border-radius: 12px;
            margin: 20px 0;
            position: relative;
            overflow: hidden;
        }
        
        .tip-box::before {
            content: '\f0eb';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 60px;
            opacity: 0.1;
        }
        
        .shortcut-key {
            background: #374151;
            color: #f3f4f6;
            padding: 4px 8px;
            border-radius: 4px;
            font-family: monospace;
            font-size: 0.9em;
            display: inline-block;
            margin: 0 2px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .nav-item {
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 10px 20px;
            border-radius: 8px;
        }
        
        .nav-item:hover {
            background: rgba(102, 126, 234, 0.1);
            transform: translateX(5px);
        }
        
        .nav-item.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <div class="hero-gradient text-white py-20">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto text-center">
                <h1 class="text-5xl font-bold mb-6" style="font-family: 'Noto Serif SC', serif;">
                    <i class="fas fa-folder-tree mr-4"></i>Cursor 项目与文件管理
                </h1>
                <p class="text-xl opacity-90 leading-relaxed">
                    掌握高效的项目管理技巧，结合 AI 能力提升开发生产力
                </p>
                <div class="mt-8 flex justify-center space-x-4">
                    <span class="bg-white bg-opacity-20 px-4 py-2 rounded-full">
                        <i class="fas fa-code mr-2"></i>智能导航
                    </span>
                    <span class="bg-white bg-opacity-20 px-4 py-2 rounded-full">
                        <i class="fas fa-git-alt mr-2"></i>版本控制
                    </span>
                    <span class="bg-white bg-opacity-20 px-4 py-2 rounded-full">
                        <i class="fas fa-search mr-2"></i>高级搜索
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Navigation -->
    <div class="sticky top-0 bg-white shadow-md z-50">
        <div class="container mx-auto px-6">
            <div class="flex overflow-x-auto py-4 space-x-4">
                <div class="nav-item whitespace-nowrap" onclick="scrollToSection('basics')">
                    <i class="fas fa-folder-open mr-2"></i>项目基础
                </div>
                <div class="nav-item whitespace-nowrap" onclick="scrollToSection('advanced')">
                    <i class="fas fa-file-code mr-2"></i>高级功能
                </div>
                <div class="nav-item whitespace-nowrap" onclick="scrollToSection('git')">
                    <i class="fas fa-code-branch mr-2"></i>版本控制
                </div>
                <div class="nav-item whitespace-nowrap" onclick="scrollToSection('search')">
                    <i class="fas fa-search-plus mr-2"></i>搜索替换
                </div>
                <div class="nav-item whitespace-nowrap" onclick="scrollToSection('visualization')">
                    <i class="fas fa-project-diagram mr-2"></i>结构可视化
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="container mx-auto px-6 py-12">
        <!-- Introduction -->
        <div class="max-w-4xl mx-auto mb-12">
            <div class="bg-white rounded-2xl shadow-xl p-8 card-hover">
                <p class="text-lg leading-relaxed text-gray-700">
                    高效的项目与文件管理是提升开发生产力的重要因素。Cursor 继承了 VSCode 强大的项目管理能力，同时结合 AI 功能提供了更智能的工作流程。本章将详细介绍这些功能的使用方法。
                </p>
            </div>
        </div>

        <!-- Section 1: 项目操作基础 -->
        <section id="basics" class="mb-16">
            <h2 class="text-3xl font-bold mb-8 section-title">6.1 项目操作基础</h2>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="bg-white rounded-2xl shadow-lg p-8 card-hover">
                    <div class="feature-icon">
                        <i class="fas fa-sitemap"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-4">工作区与多项目管理</h3>
                    <p class="text-gray-600 mb-6">Cursor 中的工作区（Workspace）是组织和管理项目的核心概念。</p>
                    
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <i class="fas fa-folder-plus text-purple-600 mt-1 mr-3"></i>
                            <div>
                                <h4 class="font-semibold mb-2">打开项目</h4>
                                <ul class="text-gray-600 space-y-1">
                                    <li>• 启动 Cursor 后选择"打开文件夹"</li>
                                    <li>• 使用 <span class="shortcut-key">Ctrl+K Ctrl+O</span> 快捷键</li>
                                    <li>• 从最近项目列表中选择</li>
                                    <li>• 命令行：<code class="bg-gray-100 px-2 py-1 rounded">cursor /path/to/project</code></li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <i class="fas fa-file-alt text-purple-600 mt-1 mr-3"></i>
                            <div>
                                <h4 class="font-semibold mb-2">工作区文件</h4>
                                <ul class="text-gray-600 space-y-1">
                                    <li>• <code class="bg-gray-100 px-2 py-1 rounded">.code-workspace</code> 文件保存工作区配置</li>
                                    <li>• 可手动编辑添加或移除项目文件夹</li>
                                    <li>• 支持包含多个项目文件夹</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-2xl shadow-lg p-8 card-hover">
                    <div class="feature-icon">
                        <i class="fas fa-compass"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-4">大型项目导航技巧</h3>
                    <p class="text-gray-600 mb-6">在大型项目中高效导航是提升生产力的关键。</p>
                    
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <i class="fas fa-rocket text-purple-600 mt-1 mr-3"></i>
                            <div>
                                <h4 class="font-semibold mb-2">快速文件导航</h4>
                                <ul class="text-gray-600 space-y-1">
                                    <li>• <span class="shortcut-key">Ctrl+P</span> 打开快速打开面板</li>
                                    <li>• 支持模糊匹配，不必输入完整路径</li>
                                    <li>• 输入 <code class="bg-gray-100 px-2 py-1 rounded">fileName:lineNumber</code> 跳转到指定行</li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <i class="fas fa-robot text-purple-600 mt-1 mr-3"></i>
                            <div>
                                <h4 class="font-semibold mb-2">AI 辅助导航</h4>
                                <ul class="text-gray-600 space-y-1">
                                    <li>• 询问"在哪里可以找到处理用户认证的代码？"</li>
                                    <li>• "项目中哪些文件实现了支付功能？"</li>
                                    <li>• AI 理解代码库结构，提供相关位置</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 工作区配置示例 -->
            <div class="bg-gray-900 rounded-2xl shadow-xl p-8 mb-8">
                <h4 class="text-white text-xl font-bold mb-4">
                    <i class="fas fa-code mr-2"></i>工作区配置示例
                </h4>
                <pre class="code-block"><code>{
  "folders": [
    {
      "path": "./frontend"
    },
    {
      "path": "./backend"
    },
    {
      "path": "./shared-lib"
    }
  ],
  "settings": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "files.exclude": {
      "**/.git": true,
      "**/node_modules": true
    }
  }
}</code></pre>
            </div>
        </section>

        <!-- Section 2: 高级文件功能 -->
        <section id="advanced" class="mb-16">
            <h2 class="text-3xl font-bold mb-8 section-title">6.2 高级文件功能</h2>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="bg-white rounded-2xl shadow-lg p-8 card-hover">
                    <div class="feature-icon">
                        <i class="fas fa-code-compare"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-4">文件比较与合并</h3>
                    <p class="text-gray-600 mb-6">比较不同文件版本是开发过程中的常见需求。</p>